<script lang="ts" setup>
import type { ApprovalMyTaskReq, PickupMyTaskReq, QueryTaskImageReq, RevertMyTaskReq, TaskVO } from '@/api/task/taskType'
import { approvalMyTask, getMyTaskPage, pickupMyTask, queryTaskImage, returnMyTask } from '@/api/task/taskApi'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'

// 定义当前页码
const currentPage = ref<number>(1)
// 默认页行数
const pageSize = ref<number>(10)
// 数据总数
const total = ref<number>(0)
// 定义响应式数据 myTaskList，用于存储我的任务列表数据
const myTaskList = ref<TaskVO[]>([])
// 表格列定义
const tableColumns = [
  { label: '#', type: 'index', align: 'center', width: '50px' },
  { label: '任务编号', prop: 'taskId', align: 'center' },
  { label: '任务名称', prop: 'taskName', align: 'center' },
  { label: '任务执行人名称', prop: 'assigneeName', align: 'center' },
  { label: '流程发起人名称', prop: 'startUserName', align: 'center' },
  { label: '任务发起时间', prop: 'startTime', align: 'center' },
  { label: '流程定义名称', prop: 'procDefName', align: 'center' },
  { label: '流程实例ID', prop: 'procInsId', align: 'center' },
  { label: '操作', align: 'center', width: '200px' },
]

// 定义响应式数据 showImage 用于控制流程图显示
const showImage = ref<boolean>(false)
// 定义响应式数据 imageData 用于存储流程图数据
const imageData = ref<string>('')

onMounted(() => {
  // 初始化分页参数并加载第一页任务数据
  currentPage.value = 1 // 设置当前页为第一页
  pageSize.value = 10 // 每页展示10条任务记录
  getMyTaskPageData() // 调用获取我的任务分页数据的方法
})

/**
 * 异步函数：获取我的任务列表数据
 * 该函数通过调用后端接口，获取当前用户的任务列表，并根据分页参数进行数据更新
 */
async function getMyTaskPageData() {
  try {
    // 设置分页参数
    const pageReq = {
      current: currentPage.value,
      size: pageSize.value,
    }

    // 调用接口获取我的任务列表数据
    const result: any = await getMyTaskPage(pageReq)

    // 如果接口调用成功且返回的状态码为200，则更新数据
    if (result.success && result.code === 200) {
      // 更新数据
      myTaskList.value = result.data.taskList
      // 收集数据总数
      total.value = result.data.taskCount
    }
    else {
      // 如果接口调用失败，显示错误提示信息
      ElMessage({
        message: '查询失败',
        type: 'error',
      })
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示操作失败的错误提示信息
    ElMessage({
      message: `查询失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}

/**
 * 处理页面数据函数
 * 本函数用于重新获取当前页面所需的数据
 * 它通过调用 getMyTaskPageData 函数来实现数据的重新加载
 */
function handerPageData() {
  // 重新加载数据
  getMyTaskPageData()
}

/**
 * 异步函数：处理任务审批
 *
 * @param row 任务对象，包含任务ID等信息
 */
async function onApproval(row: TaskVO) {
  try {
    // 获取当前任务ID并设置参数
    const param: ApprovalMyTaskReq = {
      taskId: row.taskId,
    }

    // 调用后端接口进行审批操作
    const result: any = await approvalMyTask(param)

    // 如果接口调用成功且返回的状态码为200，则显示成功提示信息
    if (result.success && result.code === 200) {
      ElMessage({
        message: '审批成功',
        type: 'success',
      })
    }
    else {
      ElMessage({
        message: `审批失败: ${result.message}`,
        type: 'error',
      })
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示操作失败的错误提示信息
    ElMessage({
      message: `审批失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}

/**
 * 异步函数用于处理任务拾取操作
 * @param row 任务对象，包含任务ID等信息
 */
async function onPickup(row: TaskVO) {
  try {
    // 获取当前任务ID并设置参数
    const param: PickupMyTaskReq = {
      taskId: row.taskId,
    }

    // 调用后端接口进行拾取操作
    const result: any = await pickupMyTask(param)

    // 如果接口调用成功且返回的状态码为200，则显示成功提示信息
    if (result.success && result.code === 200) {
      ElMessage({
        message: '拾取成功',
        type: 'success',
      })

      // 重新加载数据
      handerPageData()
    }
    else {
      ElMessage({
        message: `拾取失败: ${result.message}`,
        type: 'error',
      })
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示操作失败的错误提示信息
    ElMessage({
      message: `拾取失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}

/**
 * 异步函数：用于归还任务
 * 当用户需要撤销当前任务时调用此函数
 * @param row 任务对象，包含任务ID等信息
 */
async function onRevert(row: TaskVO) {
  try {
    // 获取当前任务ID并设置参数
    const param: RevertMyTaskReq = {
      taskId: row.taskId,
    }

    // 调用后端接口进行归还操作
    const result: any = await returnMyTask(param)

    // 如果接口调用成功且返回的状态码为200，则显示成功提示信息
    if (result.success && result.code === 200) {
      ElMessage({
        message: '归还成功',
        type: 'success',
      })

      // 重新加载数据
      handerPageData()
    }
    else {
      // 如果归还失败，显示错误信息
      ElMessage({
        message: `归还失败: ${result.message}`,
        type: 'error',
      })
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示操作失败的错误提示信息
    ElMessage({
      message: `归还失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}

/**
 * 异步函数：用于显示流程定义的图片
 * @param row 任务视图对象，包含流程实例 ID 等信息
 */
async function onShowImage(row: TaskVO) {
  try {
    // 组装查询参数，包括流程定义 ID
    const param: QueryTaskImageReq = {
      processInstanceId: row.procInsId,
    }

    // 调用后端接口获取流程定义的图片数据
    const result: any = await queryTaskImage(param)

    // 判断查询结果是否成功
    if (result.success && result.code === 200) {
      // 如果成功，则更新流程定义的图片数据
      imageData.value = result.data

      // 打开图片对话框
      showImage.value = true
    }
    else {
      // 提示操作失败的错误提示信息
      ElMessage({
        message: `查看流程进度失败原因：${result.message}`,
      })
    }
  }
  catch (error) {
    // 捕获异常并提取错误信息
    let errorMessage = '未知错误'
    if (error instanceof Error) {
      errorMessage = error.message
    }

    // 显示操作失败的错误提示信息
    ElMessage({
      message: `查看流程进度失败: ${errorMessage || '未知错误'}`,
      type: 'error',
    })
  }
}
</script>

<template>
  <el-table style="margin: 10px 0px;" :border="true" :data="myTaskList">
    <!-- ID 区域 -->
    <el-table-column type="selection" align="center" width="50px" />
    <!-- 表格数据 区域 -->
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :type="column.type"
      :label="column.label"
      :prop="column.prop"
      :align="column.align"
      :width="column.width"
    >
      <!-- 使用单个 template 包裹所有条件 -->
      <template #default="scope">
        <!-- 判断是否是操作列 -->
        <div v-if="column.label === '操作'">
          <el-button v-if="scope.row.status === 0 || scope.row.status === 2" v-hasButton="`btn.myTask.approvalMyTask`" type="primary" @click="onApproval(scope.row)">
            审批
          </el-button>
          <el-button v-if="scope.row.status === 1" v-hasButton="`btn.myTask.pickupMyTask`" type="primary" @click="onPickup(scope.row)">
            拾取
          </el-button>
          <el-button v-if="scope.row.status === 2" v-hasButton="`btn.myTask.revertMyTask`" type="primary" @click="onRevert(scope.row)">
            归还
          </el-button>
          <el-button v-hasButton="`btn.myTask.queryTaskImage`" type="primary" @click="onShowImage(scope.row)">
            查看流程进度
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[10, 20, 30, 40, 50]"
    layout="prev, pager, next, jumper,->, sizes, total"
    :total="Math.max(total, 0)"
    @current-change="getMyTaskPageData"
    @size-change="handerPageData"
  />

  <!-- 进度流程图展示弹出框 -->
  <el-dialog v-model="showImage" title="流程进度图展示" width="80%">
    <div class="image-container">
      <img :src="`data:image/jpeg;base64,${imageData}`" alt="流程进度图">
    </div>
  </el-dialog>
</template>

<style scoped>
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
}
</style>
